<!--
 * @Author: xuzehan 935351619@qq.com
 * @Date: 2023-09-17 18:51:34
 * @LastEditors: xuzehan 935351619@qq.com
 * @LastEditTime: 2024-07-02 10:57:47
 * @FilePath: \device-manage-vue\src\components\flow-design\modules\NodeList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <a-list :grid="{ gutter: 0, column: 1 }">
    <a-list-item v-for="node in nodeList" :key="node.type">
      <a-tooltip :title="node.nodeName" :overlay-style="{ fontWeight: 800, fontSize: '14px' }" placement="right">
        <div class="node-item" draggable="true" @dragstart="dragNode(node.type, type, node.vmDeviceId)">
          <!-- <a-icon style="margin-left: 6px;margin-right: 5px;" :type="node.icon" /> -->
          <img v-show="node.icon == 'NE40'" :src="mvc.ne40e" class="node-mvc" alt />
          <img v-show="node.icon == 'S5700'" :src="mvc.s5700" class="node-mvc" alt />
          <img v-show="node.icon == 'USG5500'" :src="mvc.usg5500" class="node-mvc" alt />
          <img v-show="node.icon == 'tcpK'" :src="mvc.tcpK" class="node-mvc" alt />
          <img v-show="node.icon == 'tcpF'" :src="mvc.tcpF" class="node-mvc" alt />
          <img v-show="node.icon == 'udpOdd'" :src="mvc.udpOdd" class="node-mvc" alt />
          <img v-show="node.icon == 'udpMore'" :src="mvc.udpMore" class="node-mvc" alt />
          <img v-show="node.icon == 'frequency'" :src="mvc.frequency" class="node-mvc" alt />
          <img v-show="node.icon == 'laBa'" :src="mvc.laBa" class="node-mvc" alt />
          <img v-show="node.icon == 'BCode'" :src="mvc.bCode" class="node-mvc" alt />
          <p v-if="nodeName">{{ node.nodeName }}</p>
        </div>
      </a-tooltip>
    </a-list-item>
  </a-list>
</template>

<script>
export default {
  name: 'NodeList',
  props: {
    nodeList: {
      type: Array,
      default: () => [],
    },
    nodeName: {
      type: Boolean,
      default: true,
    },
    type: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      mvc: {
        // ne40e: require('../assets/mvc/ne40e.png'),
        // s5700: require('../assets/mvc/s5700.png'),
        // usg5500: require('../assets/mvc/usg5500.png'),
        // tcpK: require('../assets/mvc/tcpK.png'),
        // tcpF: require('../assets/mvc/tcpF.png'),
        // udpOdd: require('../assets/mvc/udpOdd.jpg'),
        // udpMore: require('../assets/mvc/udpMore.jpg'),
        // frequency: require('../assets/mvc/frequency.png')
        bCode:require('../assets/mvc/BCode.png'),
        ne40e: require('../assets/mvc/测控基带设备.jpg'),
        s5700: require('../assets/mvc/单通道下变频器.jpg'),
        usg5500: require('../assets/mvc/Q频段下变频器.jpg'),
        tcpK: require('../assets/mvc/V频段上变频器.jpg'),
        tcpF: require('../assets/mvc/协议网关.jpg'),
        udpOdd: require('../assets/mvc/馈电基带设备.jpg'),
        udpMore: require('../assets/mvc/中频开关矩阵.jpg'),
        frequency: require('../assets/mvc/frequency.png'),
        port: require('../assets/mvc/port.png'),
        laBa: require('../assets/mvc/labatianxian.jpg'),
      },
    }
  },
  methods: {
    // 开始拖拽
    dragNode(type, belongTo, id) {
      console.log(belongTo)
      this.$emit('setDragInfo', {
        type,
        belongTo,
        id,
      })
    },
  },
}
</script>
<style lang="less" scoped>
.node-mvc {
  width: 20px;
  height: 20px;
  margin: 4px;
}
</style>
